<template>
  <div class="merchant SchemeDetail" ref="pageDiv">
    <!-- 搜索框 -->
    <search></search>
    <!-- 下拉菜单 -->
    <van-row type="flex" justify="space-between" class="drop-down-list">
      <van-col span="12">
        <dropDown></dropDown>
      </van-col>
      <van-col span="12">
        <div class="old-hand">
          <span v-text="checked?'普通模式':'老手模式'"></span>
          <van-switch
            v-model="checked"
            active-color="#c30c22ff"
            @input="onInput"
            class="switch-icon"
          />
        </div>
      </van-col>
    </van-row>
    <!-- 标签 -->
    <homeTag></homeTag>
    <!-- tab栏 -->
    <van-tabs
      v-model="active"
      line-width="70px"
      line-height="2px"
      title-active-color="#c30c22ff"
      animated
      swipeable
      color="#c30c22ff"
      class="tabs-box"
      :sticky="true"
      :scroll="true"
    >
      <van-tab title="全部">
        <span style="font-size:12px">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <!-- 全部列表 -->
            <storeList v-show="!checked"></storeList>
            <oldhandList v-show="checked"></oldhandList>
          </van-list>
        </span>
      </van-tab>
      <van-tab title="推荐">
        <span style="font-size:12px">
          <storeList v-show="!checked"></storeList>
          <oldhandList v-show="checked"></oldhandList>
        </span>
      </van-tab>
      <van-tab title="收藏">
        <span style="font-size:12px">
          <storeList v-show="!checked"></storeList>
          <oldhandList v-show="checked"></oldhandList>
        </span>
      </van-tab>
    </van-tabs>
    <!-- 地图拖拽 -->
    <div
      class="drag_box"
      :class="{active:mgrState}"
      ref="actionMgr"
      @click="mgrState = !mgrState"
      @touchstart="ontouchstart($event)"
      @touchmove="ontouchmove($event)"
      @touchend="ontouchend($event)"
    >
      <img src="../../assets/img/home/page/地图逛icon@3x.png" alt />
    </div>
  </div>
</template>

<script>
// 导入搜索栏组件
import search from "../../components/search.vue";
// 导入商店列表组件
import storeList from "./components/storeList.vue";
// 导入下拉菜单
import dropDown from "./components/dropDown.vue";
// 导入标记
import homeTag from "./components/homeTag.vue";
// 老孺老手模式组件
import oldhandList from "./components/oldhandList.vue";
export default {
  name: "merchant",
  components: {
    search,
    storeList,
    dropDown,
    homeTag,
    oldhandList
  },
  data() {
    return {
      checked: false,
      active: 0,
      // 列表
      list: [],
      // 加载动画
      loading: false,
      // 加载完成后提示文案
      finished: false,
      // 老手模式开关
      checked: false,
      message: "老手模式",
      // 地图拖拽
      mgrState: false,
      mousedownState: false, //鼠标默认抬起
      iX: 0, //鼠标坐标 与 拖拽按钮 间距 x
      iY: 0 //鼠标坐标 与 拖拽按钮 间距 y
    };
  },
  created() {
    console.log(window.outerHeight);
  },
  methods: {
    // 老手模式
    onInput() {},
    // 列表加载逻辑
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 100) {
          this.finished = true;
        }
      }, 300);
    },
    // 地图拖拽
    /* 鼠标按下事件 */
    ontouchstart(event) {
      /* 此处判断  pc 或 移动端 得到 event 事件 */
      let touch;
      if (event.touches) {
        touch = event.touches[0];
        console.log(touch);
      } else {
        touch = event;
      }
      // 鼠标点击 面向页面 的 x坐标 y坐标
      let { clientX, clientY } = touch;
      // 鼠标x坐标 - 拖拽按钮x坐标  得到鼠标 距离 拖拽按钮 的间距
      this.iX = clientX - this.$refs.actionMgr.offsetLeft;
      // 鼠标y坐标 - 拖拽按钮y坐标  得到鼠标 距离 拖拽按钮 的间距
      this.iY = clientY - this.$refs.actionMgr.offsetTop;
      // 设置当前 状态为 鼠标按下
      this.mousedownState = true;
    },
    /* 鼠标移动事件 */
    ontouchmove(event) {
      //鼠标按下 切移动中
      if (this.mousedownState) {
        /* 此处判断  pc 或 移动端 得到 event 事件 */
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        // 鼠标移动时 面向页面 的 x坐标 y坐标
        let { clientX, clientY } = touch;
        //当前页面全局容器 dom 元素  获取容器 宽高
        let {
          clientHeight: pageDivY,
          clientWidth: pageDivX
        } = this.$refs.pageDiv;
        /* 鼠标坐标 - 鼠标与拖拽按钮的 间距坐标  得到 拖拽按钮的 左上角 x轴y轴坐标 */
        let [x, y] = [clientX - this.iX, clientY - this.iY];

        //拖拽按钮 dom 元素  获取 宽高 style 对象
        let {
          clientHeight: actionMgrY,
          clientWidth: actionMgrX,
          style: actionMgrStyle
        } = this.$refs.actionMgr;
        /* 此处判断 拖拽按钮 如果超出 屏幕宽高 或者 小于  
           设置 屏幕最大 x=全局容器x y=全局容器y 否则 设置 为 x=0 y=0 
        */
        let outerHeight = window.outerHeight - 110;
        if (x > pageDivX - actionMgrX) x = pageDivX - actionMgrX;
        else if (x < 0) x = 0;
        if (y > pageDivY - actionMgrY) y = pageDivY - actionMgrY;
        else if (y < 160) y = 160;
        else if (y > outerHeight) y = outerHeight;

        // 计算后坐标  设置 按钮位置
        actionMgrStyle.left = `${x}px`;
        actionMgrStyle.top = `${y}px`;
        actionMgrStyle.bottom = `${y}px`;
        actionMgrStyle.right = "auto";
        //当按下键滑动时， 阻止屏幕滑动事件
        event.preventDefault();
      }
    },
    /* 鼠标抬起事件 */
    ontouchend(event) {
      // 设置当前状态为鼠标抬起
      this.mousedownState = false;
    }
  }
};
</script>

<style lang="less" scoped>
@color: #c30c22ff;
.merchant {
  margin-bottom: 58px;
  width: 100%;
  height: 100%;
}
.drop-down-list {
  position: fixed;
  left: 0;
  top: 36px;
  z-index: 999;
  background-color: #fff;
  width: 100%;
}
.tabs-box {
  margin-top: 118px;
}
/deep/.van-sticky--fixed {
  top: 118px;
}

// @fontcolor : red;
.van-icon-cross:before {
  color: #000;
}
.old-hand {
  float: right;
  height: 100%;
  line-height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  margin-right: 18px;
  margin-top: 5px;
  span {
    font-size: 12px;
    color: @color;
    margin-right: 10px;
    z-index: 666;
    text-align: center;
  }
  .switch-icon {
    margin-top: -3px;
    font-size: 20px;
  }
}
// tab栏
/deep/.van-sticky {
  background-color: #fff;
  position: fixed;
  width: 100%;
  height: 55px;
  top: 118px;
  left: 0;
  z-index: 1;
  width: 100%;
}
/deep/.van-hairline--top-bottom {
  height: 100%;
}
/deep/.van-tabs__nav--line {
  height: 100%;
}
/deep/.van-tabs__nav {
  height: 100%;
}
/deep/.van-tabs__content--animated {
  margin-top: 170px;
}
// tab栏总宽度
/deep/.van-tabs--line .van-tabs__wrap  {
  width: 240px;
}
// 清除tab栏下划线
/deep/.van-hairline--top-bottom::after,
/deep/.van-hairline-unset--top-bottom::after {
  border-width: 0;
}
// 地图拖拽
.drag_box {
  /* 使用定位，脱离文档流 */
  position: fixed;
  bottom: 60px;
  right: 15px;
  /* 鼠标移入变成拖拽手势 */
  /*   cursor: move; */
  z-index: 1000000;
  img {
    width: 50px;
  }
}
</style>